
//三级联动
//声明省
var pres = ["北京", "上海", "山东"]; //直接声明Array
//声明市
var cities = [
    ["东城", "昌平", "海淀"],
    ["浦东", "高区"],
    ["济南", "青岛"]
];
var areas = [
    [
        ["东城1", "东城2", "东城3"],
        ["昌平1", "昌平2", "昌平3"],
        ["海淀1", "海淀2", "海淀3"]
    ],
    [
        ["浦东1", "浦东2", "浦东3"],
        ["高区1", "高区2", "高区3"]
    ],
    [
        ["济南1", "济南2"],
        ["青岛1", "青岛2"]
    ]
]
//设置一个省的公共下标
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
//先设置省的值
for (var i = 0; i < pres.length; i++) {
    //声明option.<option value="pres[i]">Pres[i]</option>
    var op = new Option(pres[i], i);
    //添加
    preEle.options.add(op);
}
function chg(obj) {
    if (obj.value == -1) {
        cityEle.options.length = 0;
        areaEle.options.length = 0;
    }
    //获取值
    var val = obj.value;
    pIndex = obj.value;
    //获取ctiry
    var cs = cities[val];
    //获取默认区
    var as = areas[val][0];
    //先清空市
    cityEle.options.length = 0;
    areaEle.options.length = 0;
    for (var i = 0; i < cs.length; i++) {
        var op = new Option(cs[i], i);
        cityEle.options.add(op);
    }
    for (var i = 0; i < as.length; i++) {
        var op = new Option(as[i], i);
        areaEle.options.add(op);
    }
}
function chg2(obj) {
    var val = obj.selectedIndex;
    var as = areas[pIndex][val];
    areaEle.options.length = 0;
    for (var i = 0; i < as.length; i++) {
        var op = new Option(as[i], i);
        areaEle.options.add(op);
    }
}
//数量的增减
let num = $("num").value;
$("reduce").onclick=function () {
    if(num>1){
        $("num").value=--num;
    }
}
$("add").onclick=function () {
    if(num<20){
        $("num").value=++num;
    }
}

//评分星星
window.onload = function(){
    var container = document.getElementById('container');
    var scoreText = document.getElementById('score');
    var panel = document.getElementById('panel');
    var stars = document.getElementById('stars');
    var aLi = stars.getElementsByTagName('li');
    console.log(aLi.length);
    var score = 0;

    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    // alert(aLi.length);
    for(var i=0;i<aLi.length; i++){
        aLi[i].index = i;
        aLi[i].onmouseover = function(){
            //鼠标移动到星星上时,给该元素之前的所有兄弟节点都加上"on"类
            fnPoint(this.index);
            //显示星
            panel.style.display = "block";
            panel.style.left = stars.offsetLeft + this.index * this.offsetWidth - 80 + "px";
            // alert(this.index);
            panel.innerHTML = "<b style='color:red;'>" + (this.index + 1) + "星&nbsp;" + msg[this.index].match(/(.+)\|/)[1] + "</b>" +"<br/>" + msg[this.index].match(/\|(.+)/)[1];
        }

        //鼠标离开
        aLi[i].onmouseout = function(){
            panel.style.display = "none";
            fnPoint();
        }

        aLi[i].onclick =function(){
            score = this.index;
            fnPoint();
            scoreText.innerHTML = "<strong style='color:red;'>" + (this.index+1) + "分</strong>" +"&nbsp;(" + msg[this.index].match(/\|(.+)/)[1] + ")";
        }
    }
    //判断鼠标触碰或离开的事件，来赋值on或“”
    function fnPoint(arg){
        var rank = arg || score;
        for(var i=0; i<aLi.length; i++){
            aLi[i].className = (i <= rank) ? "on" : "";
        }
    }


    //控制点击商品详情下方选项卡的显示和隐藏。
    var ul = document.getElementById("ul1");
    var lis = ul.getElementsByTagName("li");
    var contents = document.getElementsByClassName("content");
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("index", i);
        //点击一个选项卡后其他选项卡隐藏。
        lis[i].onclick=function () {
            for(var i=0;i<lis.length;i++){
                lis[i].style.backgroundColor="";
            }
            this.style.backgroundColor="red";
            var index=this.getAttribute("index");
            for(var j=0;j<contents.length;j++){
                contents[j].style.display="none";
            }
            contents[index].style.display="block";
        }
    }

    //评论中的input框
    var textarea = document.getElementById("input1");
    var button = document.getElementById("btn");
    var ul = button.nextElementSibling;
    var num=2;//每个评论下面客户数的增加
    //点击写评论后可以增加评论在选项卡中
    button.onclick = function () {
        var content = textarea.value;

        var li = document.createElement("li");
        li.innerHTML = "<div class=\"media\" style='margin-top: 10px'>\n" +
            "                    <div class=\"media-left\">\n" +
            "                        <img src=\"images/commodity/user.jpg\" class=\"media-object\" style=\"width:60px\">\n" +
            "                    </div>\n" +
            "                    <div class=\"media-body\">\n" +
            "                        <h4 class=\"media-heading\">客户"+num+++"</h4>\n" +
            "                        <p>"+content+"</p>\n" +"&nbsp&nbsp&nbsp&nbsp&nbsp<a href='javascript:;' style='color: blue;margin-left: 50px;margin-bottom: 10px'>删除</a>"+
            "                    </div>\n" +
            "                </div>";
        ul.appendChild(li);
        var a = document.querySelectorAll("a");
        console.log(a);
        //点击删除链接后可以删除该评论信息
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                this.parentNode.parentNode.parentNode.remove(this.parentNode);
            };
        }
    };
}










